<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Tab切换</title>
<style>
* {
    background: rgb(188,205,105);
}
ul.tabs {/*Tab切换的头部样式*/
    position: absolute;
    margin: 50px;
    padding: 0;
    float: left;
    list-style: none;
    height: 32px;
    /*border-bottom: 1px solid rgb(188,205,105);*/
    border-left: 1px solid rgb(188,205,105);
    width: 20%;
    height: 100px;
    float: left;
    z-index: -1;
}
ul.tabs li { /*定义li标签的样式*/
    /*float: left;*/
    margin: 0;
    padding: 0;
    /*height: 50px;*/
    line-height: 31px;/*文字的间隔，在此时31px间隔*/
    /*border: 1px solid rgb(188,205,105);*/
    border-left: none;
    margin-bottom: -1px;
    background: rgb(188,205,105);
    /*overflow: hidden;*//*填充，不提供滚动条*/
    position: relative;
}
ul.tabs li a {
    text-decoration: none;/*设置文本排版*/
    color: #000000;
    display: block;/*设置为块级元素*/
    font-size: 1.2em;
    width: 500px;
    padding: 0 100px;
    /*border: 1px solid rgba(0,0,0,1.00);*//*此为Tab按钮的边框线颜色*/
    outline: none;/*设置边框轮廓样式*/
}
html ul.tabs li.active, html ul.tabs li.active a:hover {
  
    background: rgb(188,205,105);/*此处定义TAB1的背景颜色*/
    /*border-bottom: 1px solid rgb(188,205,105);*/
}
.tab_container {
    border: 1px solid rgba(0,0,0,1.00);
    border-top: none;
    clear: both;
    float: right;
    width: 70%;
    height: 900px;
    z-index: 9999;
    -moz-border-radius-bottomright: 5px;
    -khtml-border-radius-bottomright: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-bottomleft: 5px;
    -khtml-border-radius-bottomleft: 5px;
    -webkit-border-bottom-left-radius: 5px;
}
</style>
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">//Baidu CDN</script>
<script type="text/javascript">  
$(document).ready(function() {  
    //Default Action  
    $(".tab_content").hide(); //Hide all content  
    $("ul.tabs li:first").addClass("active").show(); //Activate first tab  
    $(".tab_content:first").show(); //Show first tab content  
      
    //On Click Event  
    $("ul.tabs li").click(function() {  
        $("ul.tabs li").removeClass("active"); //Remove any "active" class  
        $(this).addClass("active"); //Add "active" class to selected tab  
        $(".tab_content").hide(); //Hide all tab content  
        var activeTab = $(this).find("a").attr("href"); //Find the rel attribute value to identify the active tab + content  
        $(activeTab).fadeIn(); //Fade in the active content  
        return false;  
    });  
});  
</script>
</head>

<body>
<ul class="tabs">
  <li class="active" style="font-size: 30px; height: 300px"><a href="#tab1">海子诗集</a></li>
  <hr>
  <li><a href="#tab2">1.面朝大海，春暖花开</a></li>
  <li><a href="#tab3">2.麦子熟了</a></li>
</ul>
<div class="tab_container">
  <div id="tab1" class="tab_content" style="display: block; padding-left: 100px; font-size: 25px;"> 
	  <h4 style="padding-left: 150px; ">海子诗歌赏析</h4>
	  <br>
	  <h5 style=" font-size: 20px; font-family: 宋体;">&nbsp;&nbsp;海子（1964年3月24日—1989年3月26日），原名查海生，出生于安徽省怀宁县高河镇查湾村，当代青年诗人。海子在农村长大，1979年15岁时考入北京大学法律系，1982年大学期间开始诗歌创作，1983年自北大毕业后分配至北京中国政法大学哲学教研室工作，1989年3月26日在山海关附近卧轨自杀，年仅25岁。</h5>
	  
<h5 style=" font-size: 20px; font-family: 宋体;">&nbsp;&nbsp;海子1983年自北京大学毕业后分配至中国政法大学哲学教研室工作，1984年创作成名作《亚洲铜》和《阿尔的太阳》，第一次使用“海子”作为笔名。从1982年至1989年不到7年的时间里，海子创作了近200万字的作品，出版了《土地》、《海子、骆一禾作品集》、《海子的诗》和《海子诗全编》等等。</h5>
	  
<h5 style=" font-size: 20px; font-family: 宋体;">&nbsp;&nbsp;在诗人生命里，从1984年的《亚洲铜》到1989年3月14日的最后一首诗《春天，十个海子》，海子创造了近200万字的诗歌、诗剧、小说、论文和札记。比较著名的有《亚洲铜》、《麦地》、《以梦为马》、《黑夜的献诗——献给黑夜的女儿》等</h5>
	</div>
  <div id="tab2" class="tab_content" style="display: none; "> 
	<h2 style="text-align: center;"> 面朝大海，春暖花开</h2>
	  <br>
	  <br>
	  <hr>
	  <h4 style="text-align: center;">从明天起，做一个幸福的人</h4>
	  <h4 style="text-align: center;">喂马、劈柴，周游世界</h4>
	  <h4 style="text-align: center;">从明天起，关心粮食和蔬菜</h4>
	  <h4 style="text-align: center;">我有一所房子，面朝大海，春暖花开</h4>
	  <h4 style="text-align: center;">从明天起，和每一个亲人通信</h4>
	  <h4 style="text-align: center;">告诉他们我的幸福</h4>
	  <h4 style="text-align: center;">那幸福的闪电告诉我的</h4>
	  <h4 style="text-align: center;">我将告诉每一个人</h4>
	  <h4 style="text-align: center;">给每一条河每一座山取一个温暖的名字</h4>
	  <h4 style="text-align: center;">陌生人，我也为你祝福</h4>
	  <h4 style="text-align: center;">愿你有一个灿烂的前程</h4>
	  <h4 style="text-align: center;">愿你有情人终成眷属</h4>
	  <h4 style="text-align: center;">愿你在尘世获得幸福</h4>
	  <h4 style="text-align: center;">我只愿面朝大海，春暖花开</h4>
	</div>
  <div id="tab3" class="tab_content" style="display: none; "> 
	<h2 style=" text-align: center;">麦子熟了</h2>
	  <br>
	  <br>
	  <hr>
	  <h4 style=" text-align: center;">那一年 兰州一带的新麦</h4>
	  <h4 style=" text-align: center;">熟了</h4>
	  <h4 style=" text-align: center;">在回家的路上</h4>
	  <h4 style=" text-align: center;">在水面混了三十多年的父亲还家了</h4>
	  <h4 style=" text-align: center;">坐着羊皮筏子</h4>
	  <h4 style=" text-align: center;">回家来了</h4>
	  <h4 style=" text-align: center;">有人背着粮食</h4>
	  <h4 style=" text-align: center;">夜里推门进来</h4>
	  <h4 style=" text-align: center;">灯前</h4>
	  <h4 style=" text-align: center;">认清是三叔</h4>
	  <h4 style=" text-align: center;">老哥俩</h4>
	  <h4 style=" text-align: center;">一宵无言</h4>
	  <h4 style=" text-align: center;">半尺厚的黄土</h4>
	  <h4 style=" text-align: center;">麦子熟了</h4>
	</div>
</div>
</body>
</html>
